<div [@routerTransition]>
  <div class="m-subheader">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>车间问题域</span>
        </h3>
        <span class="m-section__sub">
          车间问题域的文本头信息
        </span>
      </div>
      <div class="col-xs-6 text-right">

      </div>
    </div>
  </div>
  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">


      <div class="m-portlet__body">
        <p>
          <span class="m-badge m-badge--success">
          </span>自动执行&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="m-badge m-badge--danger m-badge--wide">
            <font style="vertical-align: inherit;">
              <font style="vertical-align: inherit;">
                异常处理
              </font>
            </font>
          </span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="m-badge m-badge--danger m-badge--dot"></span>&nbsp;异常处理流程
        </p>
        <div class="row align-items-center">
          <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">

            <div class="m-stack m-stack--ver m-stack--general m-stack--demo" *ngFor="let item of domains">
              <div class="m-stack__item  m-stack__item--center m-stack__item--middle component-item ">
                <h5>
                  <font style="vertical-align: inherit;">
                    {{item?.domainType}}({{item?.componentInfoDtos.length}})
                  </font>
                </h5>
              </div>

              <!--  <div class="m-stack__item" *ngIf="item.componentInfoDtos.length==0">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">

                                    </font>
                                </font>
                            </div> -->

              <div class="m-stack__item">
                <div class="row">
                  <div class="col-md-3 col-xl-2 col-sm-6" *ngFor="let el of item.componentInfoDtos" style="margin: 5px 0;">
                    <div class="m-widget4 bg-secondary">
                      <div class="m-widget4__item">
                        <div class="m-widget4__info">
                          <span class="m-widget4__title">
                            <font [class.m--font-danger]="!el.isNormal">
                              {{el?.actCode}}{{el?.actName}}
                            </font>
                            <span class="m-badge m-badge--success" *ngIf="el.ifAutomatic"></span>
                          </span>
                          <div *ngIf="!el?.actRole==''">

                            <span class="m-widget4__sub">
                              <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">

                                  <div class="m-demo-icon__preview">
                                    <i class="flaticon-users"></i> {{el?.actRole}}
                                  </div>

                                </font>
                              </font>
                            </span>
                          </div>
                          <div *ngIf="!el?.isNormal">

                            <div *ngFor="let ab of el.abnormalFlowDtos">
                              <span class="m-widget4__sub">
                                <font style="vertical-align: inherit;">
                                  <font style="vertical-align: inherit;">
                                    <div class="m-demo-icon__preview">
                                      <span class="m-badge m-badge--danger m-badge--dot"></span>&nbsp;{{ab?.componentName}}</div>
                                  </font>
                                </font>
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>

    </div>
  </div>
</div>
